import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/'
import Home from '@/views/home'
import store from '../store/index'
import Register from '@/views/register'

Vue.use(VueRouter)

const router = new VueRouter({
  // 把Router的mode修改为history模式,VueRouter默认的模式为HASH模式
  mode: 'history',
  routes: [
    {
      path:'/login',
      name: 'login',
      component: Login
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true // 需要登录才能访问的界面
      }
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})

// // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
// const originalPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }
// 注册全局钩子用来拦截导航
// 利用router.beforeEach路由守卫设置需要先登录的页面。通过requiresAuth这个字段来判断该路由是否需要登录权限，需要权限的路由就拦截，然后再判断是否有token，有就直接登录，没有就跳到登录页面。
router.beforeEach((to, from, next) => {
  // 获取 store 里面的 token
  let token = store.state.token
  console.log('token:', token)
  // 判断要去的路由有没有 requiresAuth
  if (to.meta.requiresAuth) {
    if (token) {
      next()
    } else {
      next({
        path: '/login',
        // 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由
        query: { redirect: to.fullPath } 
      })
    }
  } else {
    next()
  }
})

export default router


/* 
  @   等价于    //'../views/login'

  在 VueCli 创建的项目中， @ 表示 src 目录
  他是 src 目录的路径别名
  好处是它不受当前文件路径的影响
  注意：@ 就是 src 路径， 后面别忘了写 '/'
  使用建议：如果加载的资源路径就在当前目录下，那就正常写
           如果需要进行父级路径查找的都使用 @
 */
  
// // 今天在写退出登录页面的时候遇到了这个问题，因为退出登录按钮本身在Home页面上，即路由地址为’ / ’ 的页面，退出登录后重定向到的页面依然是Home页面，也就是所谓的产生了冗余导航，
// const originalPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }
